<template>
	<view class="task-wrap">
		<view class="clomn-wrap" style="position: relative;">
			<view class="tabContainer" style="margin-bottom: 1px;">
				<view class="project-info1">
					<p style="font-size: 25rpx;margin-left: 30rpx;padding-top: 10rpx;color: #475299;">故障描述</p>
				</view>
				<!-- 故障描述 -->
				<view class="project-info">
					<u-form class="sample-detail" :model="form" ref="uForm">
						<u-form-item class="title">
						<u-input v-model="form.errorContent" :type="type" :border="border" :height="height"
							:auto-height="autoHeight" placeholder="请输入故障描述"/>
						</u-form-item>
					</u-form>
				</view>
			</view>
			<view class="tabContainer" style="margin-bottom: 1px;">
				<view class="project-info1">
					<p style="font-size: 25rpx;margin-left: 30rpx;padding-top: 10rpx;color: #475299;">维修内容</p>
				</view>
				<!-- 维修内容 -->
				<view class="project-info">
					<u-form class="sample-detail" :model="form" ref="uForm">
						<u-form-item class="title">
							<u-input v-model="form.maintainContent" :type="type" :border="border" :height="height"
								:auto-height="autoHeight" placeholder="请输入维修内容"/>
						</u-form-item>
						<u-form-item class="title" label-width="150" label="维修单位">
							<u-input class="value" v-model="form.maintainName" />
						</u-form-item>
						<u-form-item class="title" label-width="150" label="联系人">
							<u-input class="value" v-model="form.maintainUser" />
						</u-form-item>
						<u-form-item class="title" label-width="150" label="联系电话">
							<u-input class="value" v-model="form.maintainPhone" />
						</u-form-item>
						<u-form-item class="title" label-width="150" label="送修日期">
							<picker mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindDateChange">
								<view style="margin-left: 40px;">{{ date }}</view>
							</picker>
						</u-form-item>
					</u-form>
				</view>
			</view>
			<view class="tabContainer" style="margin-bottom: 1px;">
				<view class="project-info1">
					<p style="font-size: 25rpx;margin-left: 30rpx;padding-top: 10rpx;color: #475299;">取回信息</p>
				</view>
				<!-- 取回信息 -->
				<view class="project-info">
					<u-form class="sample-detail" :model="form" ref="uForm">
						<u-form-item class="title" label-width="150" label="取回人">
							<u-input class="value" v-model="form.backUser" />
						</u-form-item>
						<u-form-item class="title" label-width="150" label="取回日期">
							<picker mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindDateChangeBackDate">
								<view style="margin-left: 40px;">{{ date }}</view>
							</picker>
						</u-form-item>
					</u-form>
				</view>
			</view>
			<view class="tabContainer" style="margin-bottom: 1px;">
				<view class="project-info1">
					<p style="font-size: 25rpx;margin-left: 30rpx;padding-top: 10rpx;color: #475299;">验收内容</p>
				</view>
				<!-- 验收内容 -->
				<view class="project-info">
					<u-form class="sample-detail" :model="form" ref="uForm">
						<u-form-item class="title">
							<u-input v-model="form.checkContent" :type="type" :border="border" :height="height"
								:auto-height="autoHeight" placeholder="请输入验收内容"/>
						</u-form-item>
						<u-form-item class="title" label-width="150" label="验收人">
							<u-input class="value" v-model="form.checkUser" />
						</u-form-item>
						<u-form-item class="title" label-width="150" label="验收日期">
							<picker mode="date" :value="dateCheckDate" :start="startDate" :end="endDate"
								@change="bindDateChangeCheckDate">
								<view style="margin-left: 40px;">{{ date }}</view>
							</picker>
						</u-form-item>
					</u-form>
				</view>
			</view>
			<view class="footerBtn" style="display: flex;">
				<view class="btn footerBtn footerBtns" style="justify-content: center;">
					<view style="padding:0 10px;width: 50%;">
						<button class="rightTabsBtn" type="primary" @click="commit">提交</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				form: {
					deviceId: "",
					type: 2,
					errorContent:"",
					maintainContent:"",
					maintainName:"",
					maintainPhone:"",
					maintainUser:"",
					sendDate:"",
					backDate:"",
					checkDate:"",
					backUser:"",
					checkContent:"",
					checkUser:"",
					empName:"",
				},
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				type: 'textarea',
				border: false,
				height: 200,
				autoHeight: true,
			}
		},
		onLoad(option) {
			console.log(option)
			this.form.deviceId = option.id
			this.empName = option.empName
			this.form.checkUser = this.empName
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.detail.value;
				this.form.sendDate = this.date
			},
			bindDateChangeBackDate: function(e) {
				this.date = e.detail.value;
				this.form.backDate = this.date
			},
			bindDateChangeCheckDate: function(e) {
				this.date = e.detail.value;
				this.form.checkDate = this.date
			},
			//提交
			commit() {
				let data = this.form;
				console.log(data);
				this.$api.maintain(data, res => {
				if(res.code === 200) {
					this.$common.successToShow("提交成功")
					wx.navigateTo({
						url: '/pages/InstrumentManagement/index?id=' + this.form.deviceId,
					})
					console.log(222);
				} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
						this.commitLoading = false
					}
				})
			
			},
		}
	}
</script>

<style scoped>
	.tabContainer {
		overflow-x: hidden;
		width: 100%;
		/* height: 100%; */
		padding-bottom: 3rpx;
		padding-left: 27rpx;
		padding-right: 27rpx;
	}

	.project-info1 {
		height: 50rpx;
		width: calc(100%-98rpx);
		background-color: #ffffff;
		margin-top: 10rpx;
		border-radius: 19rpx 19rpx 0 0;
		background-color: #D3DDF9;
	}

	.project-info {
		/* height: 280rpx; */
		width: calc(100%-98rpx);
		background-color: #ffffff;
		padding-top: 5rpx;
		padding-right: 49rpx;
		padding-bottom: 1rpx;
		border-radius: 0 0 19rpx 19rpx;
	}

	.sample-detail {
		margin-top: 20rpx;
		font-size: 25rpx;
		height: 40rpx;
		align-items: center;

	}

	.sample-detail .title {
		color: #2E2E2E;
		font-weight: bolder;
		opacity: 0.8;
		display: inline-block;
		padding-left: 30rpx;
		width: 650rpx;
	}

	.sample-detail .value {
		color: #555555;
		font-weight: 400;
		opacity: 0.7;
		width: 65%;
		display: inline-block;
		padding-left: 80rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 50rpx;
	}
	.button_login {
		margin-top: 20rpx;
		margin-right: auto;
		padding-left: 40rpx;
		padding-top: 0rpx;
		font-size: 30rpx;
		background-color: #5555ff;
		color: #fff;
	}
	.footerBtn {
		/* position: fixed; */
		bottom: 0;
		left: 0;
		width: 100%;
	}
	
	.btn {
		border-radius: 0;
		width: 100%;
		background: #2f3a89;
	}
	
	.footerBtns {
		display: flex;
		background: #d2dcf8;
		padding: 10rpx 0;
		box-shadow: -1px 0 1px #ccc;
	}
	.rightTabsBtn {
		height: 60rpx;
		font-size: 14px;
		background: #2f3a89;
	}
</style>
